<template>
  <div class="news-details-page">
    <top-header :title="'最新资讯'" />
    <div class="news-details-content">
      <div class="title font-size-16">{{ news_details.title }}</div>
      <div class="title-date font-size-12">
        <span>{{ news_details.created_at }}</span>
      </div>
      <div class="info font-size-14"
           v-html="news_details.content"></div>
    </div>
  </div>
</template>

<script>
import TopHeader from '@/components/TopHeader';

export default {
	name: 'index',
	components: {
		TopHeader,
	},
	data() {
		return {
			news_details: {}, //资讯详情数据
		};
	},
	mounted() {
		this.getNewDetail(this.$route.query.detail_id);
	},
	methods: {
		getNewDetail(detail_id) {
			//获取资讯详情
			_api
				.api_userPortal_sysNews_getById({
					sys_news_id: detail_id,
				})
				.then((res) => {
					this.news_details = res.data;
				})
				.catch((error) => {
					console.log(error);
				});
		},
	},
};
</script>

<style lang="scss">
.news-details-content {
	border-top: 0.024155rem solid #e8e8e8;
	padding: 0.338164rem 0.338164rem 0 0.338164rem;

	.title {
		font-weight: bold;
		color: #333333;
		padding: 0 0 0 0;
	}

	.title-date {
		margin-top: 0.193237rem;
		color: #a8a8a8;
	}

	.info {
		margin-top: 0.338164rem;
		color: #06121e;
		img {
			width: 100%;
		}
		p {
			margin: 0;
			font-size: 12pt;
		}
	}
}
</style>
